<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>有蜜</title>
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
.header{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
	height: 2.6rem;
	font-size: 0.7rem;
	color: #333;
	padding-left: 1.4rem;
}
.header img{
	height: 1.5rem;
	margin-right: 0.5rem;
}
.black{
	height: 2.8rem;
}
.backFix{
	position: fixed;
	bottom: 5rem;
	right: 0;
	width: 2.5rem;
}
.backFix img{
	height: 2rem;
}
</style>
</head>

<body class="bg-f5">
	<div class="header comFlexItem">
		<div><img src="../image/demo/01.png" alt=""></div>
		<div class="flex-auto">KELLY 霏霏的推荐</div>
		<div></div>
	</div>
	<div class="black"></div>
	<div class="comFlowBox">
		<div class="comGodList" id="flow_html">
			<div class="grid-sizer"></div>

		</div>
	</div>
<script type="text/x-dot-template" id="flow_tpl">
{{ for(var i=0;i<2;i++){ }}
<div class="item">
	<div class="inner">
		<div class="photo"><img src="../image/demo/03.png" alt=""></div>
		<div class="textBox">
			<div class="title aui-flex-col aui-flex-middle">
				<div class="aui-ellipsis-2">欧莱雅护发精油修复干枯防毛躁柔顺护发素正品</div>
			</div>
			<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
				<div><div class="avatar"><img src="../image/demo/02.jpg" alt=""></div></div>
				<div class="flex-auto name aui-ellipsis-1">Kelly霏霏</div>
				<div class="like" tapmode onClick="togLike(this)">7629</div>
			</div>
		</div>
	</div>
</div>
<div class="item">
	<div class="inner">
		<div class="photo"><img src="../image/demo/04.png" alt=""></div>
		<div class="textBox">
			<div class="title aui-flex-col aui-flex-middle">
				<div class="aui-ellipsis-2">欧莱雅护发精油修复干枯防毛躁柔顺护发素正品</div>
			</div>
			<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
				<div><div class="avatar"><img src="../image/demo/02.jpg" alt=""></div></div>
				<div class="flex-auto name aui-ellipsis-1">Kelly霏霏</div>
				<div class="like" tapmode onClick="togLike(this)">7629</div>
			</div>
		</div>
	</div>
</div>
{{ } }}
</script>
<div class="backFix"><img src="../image/common/back02.png" alt=""></div>
</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
var currentSearch = '';
var gridDom = '#flow_html';
var grid;
    apiready = function() {
        api.parseTapmode();
		// 监听到达底部
		api.addEventListener({
		  name:'scrolltobottom',
		  extra:{
			  threshold: 0
		  }
		}, function(ret, err){
			if(currentSearch){
				getFlow();
			}
		});
    };
	//调用瀑布流
	grid = new Masonry( gridDom, {
		columnWidth: '.grid-sizer',
		itemSelector: '.item',
		percentPosition: true
	});
	imagesLoaded( gridDom, function() {
		grid.layout();
	});
	getFlow();
	//搜索事件
	function searchFn(txt){
		if(!txt){
			return;
		}
		currentSearch = txt;

	}
	//瀑布流
	function getFlow(){
		var tpl = $$('#flow_tpl').html();
		var tempFn = doT.template(tpl);
		var elem = $$( tempFn( ) );

		$$(gridDom).append( elem );
		grid.appended( elem );
		imagesLoaded( gridDom, function() {
			grid.layout();
		});
	}
</script>
</html>
